<template>
  <div style="padding: 40px">
    <!-- 新增弹窗 -->
    <el-dialog title="我的支付豆" :visible.sync="payDialogVisible">
      <div v-if="payData" style="font-size: 18px">
        <p>当前余额：{{ payData }} 豆</p>
      </div>
      <div v-else>加载中...</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="payBeansLoad()">充值支付豆</el-button>
        <el-button @click="payDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <el-dialog title="请充值" :visible.sync="payBeansLoadVisible">
      <el-form :model="numberValidateForm" label-width="120px">
        <el-form-item label="支付豆">
          <el-input v-model.number="numberValidateForm.payBean" style="width: 50%"></el-input>
        </el-form-item>
      </el-form>

      <span class="dialog-footer">
          <el-button type="primary" @click="paymentBeans(numberValidateForm)">确定</el-button>
          <el-button @click="dialogVisible = true">取消</el-button>
      </span>
    </el-dialog>
 
      <el-form :model="form" label-width="120px" :disabled="dialogVisible">
        <el-form-item label="用户名">
          <el-input v-model="form.username" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
            <el-input v-model="form.email" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
                  action="#"
                  :file-list="fileList"
                  list-type="picture-card"
                  :limit="1"
                  :on-change="handelChange"       
                  :data="dataList"
                  :auto-upload="false">
                    <i slot="default" class="el-icon-plus"></i>
                </el-upload>
        </el-form-item>
        
      </el-form>
      <span class="dialog-footer">
          <el-button type="primary" @click="showPayDialog">查看支付豆</el-button>
          <el-button @click="dialogVisible = true">取消</el-button>
          <el-button type="primary" @click="saveEdit">{{dialogVisible?'修改':'保存'}}</el-button>
      </span>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {getMyPayLoad, getUserUpdate, paymentBeans} from '@/http/user.js'
import { mapActions } from 'vuex'
import { getUpload } from '@/http/upload.js'

export default {
  name: "Notice",
  
  data() {
    return {
      form: {
        username: '',
        email: '',
        userAvatar: '',
      },
      payDialogVisible: false, // 控制支付豆弹窗
      rechargePayBeans:false,
      payBeansLoadVisible:false,
      numberValidateForm:{
        payBean:'',
      },
      payData: 0,
      fileList:[],
      dataList: {},
      dialogVisible: true,
      currentPage: 1,
      pageSize: 5,
      total: '',
      tableData: [],
    }

  },
  created() {
    this.load()
  },

  methods: {
    ...mapActions(['user/getUserInfo']),
   async  handelChange(file, fileList){
      let formData =  new FormData()
      console.log(file.raw);
      
      formData.append("file", file.raw);
      const res = await getUpload(formData)
      if (res !== '') {
        this.$message({
          message: "上传成功",
          type: "success",
        });
      }
      this.form.userAvatar = res.data
      this.fileList =  [{name: 'food.jpg', url: res.data}]
    },
    async load() {
      this.form = {
        username: this.username,
        email: this.userEmail,
        userAvatar: '',
      }
      this.fileList =  [{name: 'food.jpg', url: this.userAvatar}]
    },
    // 确认修改
    async saveEdit() {
      if (this.dialogVisible) {
        this.dialogVisible = !this.dialogVisible
      }else{
        this.form.userAvatar = this.fileList[0].url
        const { code, message ,data} = await getUserUpdate(this.form)
        this.$store.dispatch('user/getUserInfo', {...this.userInfo, ...data})
        if (code == '0') {
          this.$message({
            type: "success",
            message: "修改成功"
          })
        } else {
          this.$message({
            type: "error",
            message: "修改失败"
          })
        }
        this.dialogVisible = true
        this.load()
      }
      
    },
    // 查看自己的支付豆
    async showPayDialog() {
      const { code, message ,data} = await getMyPayLoad()
      if (code === 0){
        console.log(data)
        this.payData = data
        this.payDialogVisible = true
      }else {
        this.$message({
          type: "error",
          message: "查询失败"
        })
      }
    },
    async payBeansLoad(){
      this.payBeansLoadVisible = true
    },
    async paymentBeans() {
      const { code, message ,data} = await paymentBeans(this.numberValidateForm)
      if (code === 0){
        this.$message({
          type: "success",
          message: "支付成功，等待管理员审核"
        })
        this.payBeansLoadVisible = false;
      }else {
        this.$message({
          type: "error",
          message: "支付失败"
        })
      }
    }
    },
  computed: {
    ...mapGetters({
      userId: 'user/getUserId',
      username: 'user/getUserName',
      userAvatar: 'user/getUserAvatar',
      userEmail: 'user/getUserEmail',
      userInfo :  'user/getUser',
    })
  }

}
</script>

 
<style scoped lang="scss">
.dialog-footer{
  display: flex;
  justify-content: end;
}
</style>